<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文章详情</title>
<link rel="stylesheet" href="./static/css/common.css">
<style>
    .articleThum{
      /* height: 375px; */
    }
    .articleThum img{
      width: 100%;
      height: 100%;
    }
    .header{
     padding: 10px 15px;
   }
   .user{
     display: flex;
     padding:10px 15px;
     align-items:center;
   }
   .user .headbox{
     width: 40px;
     height: 40px;
     border-radius: 20px;
     overflow: hidden;
   }
   .user .userHead{
     display: inline-block;
     width: 100%;
     height: 100%;
   }
   .user .userInfo{
     color: #535252;
     margin-left:10px;
     flex:1;
   }
   .user .userInfo .time{
     color: #e0e0e0;
     font-size: 12px;
   }
   .viedoList{
     margin:10px 15px;
   }
   .listbox{
     display: flex;
     margin:10px 0;
     align-items: center
   }
   .listbox .left {
     width: 100px;
     height: 60px;
     margin-right: 10px;
   }
   .listbox .left img{
      display: inline-block;
      width: 100%;
      height: 100%;
   }
</style>
    
</head>
<body>
  <div id="app" v-cloak>
    <div>
      <div class="articleThum">
          <img :src="articleThum" alt="">
      </div>
  
      <div class="header">
          <h4 class="font4">{{title}}</h4>
      </div>
      <div class="user">
        <div class="headbox"><img class="userHead" :src="user.userHeader" alt=""></div>
        <div class="userInfo">
            <div class="userName">{{user.userNick}}</div>
            <div class="time">{{time(user.getTime)}}</div>
        </div>
        <a :href="appUrl" id="appBtn" type="button" >关注</a>
      </div>
      <div class="viedoList">
          <div v-html='articleContent'></div>
      </div>
    </div> 
    <div class="footBox">
      <img src="./static/image/logo.png" alt="">
      <div class="center">
        <h5>牙记</h5>
        <div class="fixBoton">牙套计时分享社区</div>
      </div>
      <a :href="appUrl" class="lastBox">立即体验</a>
    </div> 
  </div>
  <script src="./static/js/vue.js"></script>
  <script src="./static/js/axios.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{ 
        appUrl:'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1130246825',
        url:'',
        articleThum:'',
        articleContent:'',
        title:'',
        center:'',
        user:{
          userHeader:'',
          userNick:'',
          createdAt:'',
          getTime:''
        },
        lists:[]
      },
      created() {  
        let url = location.href.split('?');
        let id = '';
        

        Object.keys(url).forEach(function(key){
          if(url[key].indexOf('id=') > -1){
            id = url[key].split('=')
            id = parseInt(id[1])
          }
        });
        console.log(id)
        axios.get(`https://www.yajiapp.com:8443/super_yaji/article/wap/${id}`)
        .then(res =>{
          this.articleThum = res.data.data.articleThum;
          this.title = res.data.data.articleTitle;
          this.user.userHeader = res.data.data.articleUser.userHeader  ;
          this.user.userNick = res.data.data.articleUser.userNick;
          this.user.getTime = res.data.data.createtime;
          this.articleContent = res.data.data.articleContent
        });
        const  ua = navigator.userAgent.toLowerCase();	
        if (/iphone|ipad|ipod/.test(ua)) {
          this.appUrl = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1130246825';
        } else if (/android/.test(ua)) {
        this.appUrl = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.grzx.toothdiary&from=groupmessage'
        }
      },
      methods:{
        time(val) {
          const now =  new Date(val)
          const month = now.getMonth()+1;
          const date = now.getDate();
          return `${month}-${date} `
        }
      }
    })
  </script>
</body>
</html>